/**
* 设备选择器
*/
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <el-select size="small" v-model="formInline.pk" placeholder="请选择产品">
          <el-option v-for="pro in products" :label="pro.name" :value="pro.code" :key="pro.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model="formInline.dn" placeholder="输入设备DN">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"
      style="width: 100%;">
      <el-table-column sortable prop="productName" label="产品" width="250" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="deviceName" label="设备DN" width="150" show-overflow-tooltip>
      </el-table-column>
        <el-table-column align="left" min-width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="selectDevice(scope.$index, scope.row)">选择</el-button>
          </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
  import {
    DeviceList,
  } from '../../api/deviceApi'
  import {
    ProductList
  } from '../../api/productApi'
  import Pagination from '../../components/Pagination'
  export default {
    name: 'DeviceSelector',
    props: {
     param:{
         type: Object,
         default: () => {
            return {
                pk: ''
            }
         }
     }
    },
    data() {
      return {
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        chidrenDevicesVisiable: false,
        title: '预览',
        formInline: {
          page: 1,
          limit: 10,
          pk: '',
          dn: '',
          online: ''
        },
        products: {},
        listData: [],
        productMap: {},
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        }
      }
    },
    // 注册组件
    components: {
      Pagination
    },
    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
      if(this.param.pk){
        this.formInline.pk=this.param.pk
      }
      this.getdata(this.formInline)
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      getdata(parameter) {
        this.loading = true

        ProductList()
          .then(res => {
            this.products = res.data;
            res.data.forEach(p => {
              this.productMap[p.code] = p.name;
            });

            DeviceList(parameter)
              .then(res => {
                this.loading = false
                res.data.forEach(d => {
                  d.productName = this.productMap[d.productKey];
                });
                this.listData = res.data
                // 分页赋值
                this.pageparm.currentPage = this.formInline.page
                this.pageparm.pageSize = this.formInline.limit
                this.pageparm.total = res.count

              }, () => {
                this.loading = false
              })

          }, () => {
            this.loading = false
          });

      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },
      // 搜索事件
      search() {
        this.getdata(this.formInline)
      },
      selectDevice(index,row){
        this.$emit('deviceSelected',row)
      }
    }
  }
</script>
